import { useRequest } from 'ahooks';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Input, Form, Selector, Space, Divider, Notify, Empty } from 'react-vant';
import { NavBar } from 'antd-mobile';
import { feedBack } from '../../api';
import "./index.less"

const tags = ["提个需求","意见反馈","我想代理","其他"];
const tagList = tags.map(item => ({
    label: item,
    value: item
}));

type submitForm = {
    name: string,
    type: string,
    contact: string,
    content: string
}

const SuccessPage = () => {
    const navigate = useNavigate()
    return (
        <Empty description={
            <Space direction="vertical" align='center'>
                <h3>恭喜您! 提交成功</h3>
                <p>您的问题我们已经收到！</p>
            </Space>
        }>
            <Space>
                <Button style={{ width: 120 }} size='small' plain round color='#3f72e6' onClick={() => { navigate('/') }}>
                    返回
                </Button>
            </Space>
        </Empty>
    )
}

export default () => {
    const [isSuccess, setIsSuccess] = useState<Boolean>(false);

    const navigate = useNavigate();
    const pullNoteService = async (data: submitForm) => {
        let params = {...data, type: data.type[0]};
        await feedBack(params);
        Notify.show({
            type: 'success',
            message: '提交成功'
        })
        setIsSuccess(true)

    }

    const { loading, run } = useRequest(pullNoteService, { manual: true, throttleWait: 2000 });

    const [form] = Form.useForm();

    if (isSuccess) {
        return <SuccessPage />
    } else {
        return (
            <>
                <NavBar className='sticky bgfff' onBack={() => navigate(-1)}>帮助与反馈</NavBar>
                <Form
                    className='feedback'
                    style={{ paddingBottom: 60 }}
                    form={form}
                    onFinish={run}
                    footer={
                        <div style={{ margin: '16px 16px 0' }}>
                            <Button loading={loading} round plain nativeType="submit" type="primary" block>
                                提交
                            </Button>
                        </div>
                    }
                >
                    {/* <Divider contentPosition='left' style={{ color: '#999', borderColor: '#3f45ff' }}>
                        用户反馈中心
                    </Divider> */}

                    <Form.Item label="反馈类型"  labelWidth='80' name="type" rules={[{ required: true,message: '至少选一个吧' }]}>
                        <Selector
                            className='tagsWrapper'
                            options={tagList}
                        />
                    </Form.Item>

                    <Form.Item
                        labelWidth='80'
                        rules={[{ required: true, message: '请填写姓名' }]}
                        name="name"
                        label="怎么称呼"
                    >
                        <Input placeholder="请输入称呼" />
                    </Form.Item>

                    <Form.Item
                        labelWidth='80'
                        rules={[{ required: true, message: '请填写/微信号/QQ号/手机号' }]}
                        name="contact"
                        label="联系方式"
                    >
                        <Input placeholder="请输入联系方式" />
                    </Form.Item>

                    <Form.Item labelWidth='80' name='content' label='备注说明'>
                        <Input.TextArea rows={2} autoSize maxLength={120} placeholder="如果有,可填写您的备注说明" showWordLimit />
                    </Form.Item>
                </Form>
            </>
        );
    }
};
